<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const props = withDefaults(
  defineProps<{
    percentage?: number;
    isAnimate?: boolean;
    time?: number;
  }>(),
  {
    percentage: 0,
    isAnimate: false,
    time: 0,
  },
);

const p = ref<number>(0);

onMounted(() => {
  if (props.isAnimate) {
    const onceTime = Math.ceil(props.time / props.percentage);
    const timer = setInterval(() => {
      ++p.value;
      if (p.value >= props.percentage) {
        p.value = props.percentage;
        clearInterval(timer);
      }
    }, onceTime);
  }
});
</script>

<template>
  <el-progress :percentage="p" v-bind="$attrs"></el-progress>
</template>

<style lang="scss" scoped></style>
